<template>
    <div id="app">
        <el-container>

            <el-header id="header" style="height: 70px">Coco
                <div style="display: inline;font-size: 20px;font-weight: 500;">面向未来时代的云计算平台</div>
                <el-link class="header-button" :underline="false" type="warning" href="/#/editor" >控制台</el-link>
                <el-link class="header-button" :underline="false" type="warning" href="http://ai.xmzj.xyz">主页</el-link>


            </el-header>

            <el-container>
                <el-aside width="170px">
                    <el-menu default-active="1-2" :router="true" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose"
                             :collapse="isCollapse">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span slot="title">AI工厂</span>
                            </template>
                            <el-menu-item-group title="AI训练">
                                <el-menu-item index="1-1-1" disabled>数据桶</el-menu-item>
                                <el-menu-item index="1-1" disabled>数据处理</el-menu-item>
                                <el-menu-item index="1-2" :route="{path: '/editor'}">模型训练</el-menu-item>
                                <el-menu-item index="1-3" disabled>模型评估</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="AI服务">
                                <el-menu-item index="1-4" disabled>AI推理</el-menu-item>
                                <el-menu-item index="1-5" disabled>AI市场</el-menu-item>
                            </el-menu-item-group>

                        </el-submenu>


                        <el-menu-item index="2" :route="{path: '/editor-5G'}">
                            <i class="el-icon-menu"></i>
                            <span slot="title">5GIoT工厂</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">敬请期待</span>
                        </el-menu-item>
                        <el-menu-item index="4" disabled>
                            <i class="el-icon-setting"></i>
                            <span slot="title">敬请期待</span>
                        </el-menu-item>

                        <el-menu-item @click="changeis">
                            <i class="el-icon-arrow-left"></i>

                        </el-menu-item>
                    </el-menu>


                </el-aside>

                <el-container>
                    <el-main>
                        <router-view></router-view>
                    </el-main>


                </el-container>
            </el-container>
        </el-container>

    </div>
</template>

<script>

    document.title='Coco - 面向未来时代的云计算平台'
    export default {
        data() {
            return {
                isCollapse: false
            };
        },
        methods: {
            changeis: function () {
                this.isCollapse = !this.isCollapse
            }
        },
        name: 'app',
        components: {}
    }
</script>

<style>


    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 160px;
        height: 100%;
    }

    .el-submenu .el-menu-item {
        min-width: auto !important;

    }

    #header {
        font-size: 40px;
        font-weight: 800;
        color: #FFAE36;
        border-bottom: solid  1px #d7d7d7;
        margin-bottom: 15px;
        padding: 5px 0 0px 21px;
    }

    .header-button{
        float: right;
        margin: 15px 40px 0 0;
        font-size: 17px!important;
    }

</style>
